<template>
  <div class="pic">
    <div>
      <!-- 导航头 -->
      <van-nav-bar class="nav_bar" fixed>
        <div slot="left" class="left">×</div>
        <div slot="right">帮助</div>
      </van-nav-bar>
    </div>
    <div class="mei">欢迎登录美团</div>
    <!-- 登录 -->
    <div class="login">
      <van-form>
        <van-field
          class="phone"
          label="手机号"
          placeholder="请输入手机号"
          maxlength="11"
          v-model="userphone"
        ></van-field>
        <div class="mei1" v-show="p">未注册的手机号验证自动创建美团账号</div>
        <van-field
          class="pwd"
          type="password"
          v-model="pwd"
          v-show="pw"
          label="密码"
          placeholder="请输入密码"
        ></van-field>
        <div></div>
      </van-form>
      <!-- 单选框 -->
      <div class="checkbox">
        <van-checkbox icon-size="14px" v-model="checked"
          >我已阅读并同意《美团用户协议》我已阅读并同意《美团用户协议》我已阅读并同意《美团用户协议》</van-checkbox
        >
      </div>
      <!-- 注册按钮 -->
      <div class="but">
        <van-button
          class="b"
          :disabled="disabled"
          type="primary"
          size="normal"
          @click="checkForm"
          >获取短信验证码</van-button
        >
      </div>
      <!--  -->
      <div class="mi1">
        <span class="mi" @click="mi">{{ n }}</span>
        <span class="yu">遇到问题</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checked: true,
      pw: true,
      p: false,
      n: "验证码登录",
      userphone: "",
      pwd: "",
      disabled: true,
    };
  },
  watch: {
    userphone() {
      if (this.userphone.length == 11) {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    },
  },
  methods: {
    mi() {
      if (this.pw && this.n && this.p != "true") {
        this.pw = false;
        this.p = true;
        this.n = "密码登录";
      } else {
        this.pw = true;
        this.p = false;
        this.n = "验证码登录";
      }
    },
    checkphone() {
      let reg = /^1[3-9]\d{9}$/;
      if (reg.test(this.userphone)) {
        // 验证成功

        return true;
      } else {
        // 验证失败
        return false;
      }
    },
    checkPwd() {
      let reg = /^\d{6}$/;
      if (reg.test(this.pwd)) {
        // 验证成功
        return true;
      } else {
        // 验证失败
        return false;
      }
    },
    // 点击按钮验证
    checkForm() {
      if (this.checkphone()) {
        console.log("cheng");
      } else if (this.checkphone() && this.checkPwd()) {
        console.log("chenggong");
      } else {
        console.log("baibai");
      }
    },
  },
};
</script>
<style>
.mei {
  margin: 100px 0 0 50px;
  font-size: 25px;
  font-weight: 600;
}
.login {
  position: absolute;
  margin-top: 30px;
  width: 100%;
}
.mei1 {
  margin: 1rem 0 0 1rem;
  font-size: 12px;
  color: rgb(133, 133, 133);
}
.checkbox {
  font-size: 12px;
  margin: 2rem 3rem 0 1rem;
}
.but {
  text-align: center;
  margin: 1rem 0 0 0;
}
.mi1 {
  margin: 2rem 0 0 0;
  font-size: 12px;
}
.mi {
  margin: 1rem 0 0 1rem;
}
.yu {
  margin: 1rem 0rem 0 14rem;
}
.pwd {
  margin: 10px 0 0 0;
}
.b {
  width: 80%;
}
</style>